<template>
  <el-dialog title="店铺信息修改"
             :close-on-click-modal="false"
             top="20vh"
             center
             width="750px"
             :visible.sync="visible">
    <div class="container">
      <el-form :model="dataForm"
              :rules="dataRule"
              ref="dataForm"
              label-width="80px"
              :hide-required-asterisk='true'
              center='true'>

        <el-form-item label="手机号码"
                      prop="mobile">
          <el-input v-model="dataForm.mobile"
                    placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item label="验证码"
                      prop="checkCode">
          <el-input v-model="dataForm.checkCode"
                    placeholder="验证码">
            <span slot="append" style="border:0;color:#1F87E8;background-color:rgba(0,0,0,0);width:100%;height:100%;" v-if="!isPending" @click="getCheckCode">获取验证码</span>
            <span slot="append" style="border:0;color:#606266;background-color:rgba(0,0,0,0);width:100%;height:100%;" v-if="isPending">{{remainingTime}}</span>
          </el-input>
        </el-form-item>
        <el-form-item label="提现账户"
                      prop="cardNumber">
          <el-input v-model="dataForm.cardNumber"
                    placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="开户行号"
                      prop="bankCode">
          <el-input v-model="dataForm.bankCode"
                    placeholder="请输入开户行行号"></el-input>
        </el-form-item>
        <el-form-item label="持卡人"
                      prop="cardOwner">
          <el-input v-model="dataForm.cardOwner"
                    placeholder="请输入持卡人姓名"></el-input>
        </el-form-item>
      <el-form-item prop='openBank' label="开户银行">
        <el-input v-model="dataForm.openBank"></el-input>
      </el-form-item>
        <el-form-item label="店铺标语"
                      prop="intro">
          <el-input v-model="dataForm.intro"
                    placeholder="请输入店铺标语"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary"
                @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isMobile } from '@/utils/validate'
import { luhmCheck } from '@/utils/luhmCheck'
import { bankCardAttribution } from '@/utils/bankcard'

export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      console.log('validateMobile running');
      if (value == '') {
        callback()
      }else if(!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    };
    var validatecheckCode = (rule, value, callback) => {
      console.log('validateCheckcode running');
      if (this.validateRunning == true) {
        return
      }
      this.validateRunning = true
      if (this.dataForm.mobile == this.oriMobile && this.dataForm.cardNumber == this.oriCardNumber && this.dataForm.bankCode == this.oriBankCode) {
        callback()
      }
      else if (this.dataForm.mobile && !this.dataForm.checkCode) {
        callback(new Error('请填写验证码'))
      }
      else if (this.dataForm.cardNumber && !this.dataForm.checkCode) {
        callback(new Error('请填写验证码'))
      }
      else if (this.dataForm.checkCode == this.rightCode&&this.rightCode!=='') {
        callback()
      }else{
        this.$http({
          url: this.$http.adornUrl('/p/sms/validate'),
          method: 'get',
          params: this.$http.adornParams({
            mobile: this.dataForm.mobile,
            code: this.dataForm.checkCode
          })
        }).then(({data}) =>{
          console.log(data);
          if (data == '000') {
            callback(new Error('检验次数次数过多，请稍后重试'))
          }else if (data == '111') {
            callback(new Error('验证码错误'))
          }else if (data == '222') {
            callback(new Error('验证码已过期'))
          }else if (data == '999'){
            this.rightCode = this.dataForm.checkCode
            callback()
          }
        })
      }
      console.log('changeValidateRunning false');
      this.validateRunning = false

    };
    var validateBankNumber = (rule, value, callback) => {
        //银行卡验证
      if(this.dataForm.cardNumber != ""){
        if(this.dataForm.cardNumber.length < 15 || this.dataForm.cardNumber.length > 20) {
          callback(new Error("银行卡号长度必须在16到19之间！"));
        }
        var num = /^\d*$/; //全数字
        if(!num.test(this.dataForm.cardNumber)) {
          callback(new Error("银行卡号必须全为数字！"))
        }
        //开头6位
        var strBin ="10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
        if(strBin.indexOf(this.dataForm.cardNumber.substring(0,2)) == -1) {
          callback(new Error(("银行卡号开头6位不符合规范！")))
          return false;
        }
        //Luhm校验（新） luhmCheck()是验证银行卡号码正误的
        if(!luhmCheck(this.dataForm.cardNumber)){
          callback(new Error("银行卡号码有误！"))
        }else{
        //这里是展示给用户看得银行卡开户名以及传递给表单隐藏域的bankCardAttribution()方法就是自动匹配开户银行的
        callback()
        console.log(bankCardAttribution(this.dataForm.cardNumber));
        this.dataForm.openBank = bankCardAttribution(this.dataForm.cardNumber).bankName;
        console.log(bankCardAttribution(this.dataForm.cardNumber).openBank)
        }
      }else{
        callback()
      }
      // this.$http({
      //   url: this.$http.adornUrl('/card/verifyCard'),
      //   method: 'GET',
      //   params: this.$http.adornParams({

      //   })
      // }).then((res) =>{
      //   console.log(res)
      // })
      // callback()
      this.$refs.dataForm.validateField('checkCode')
    };
    var validateIntro =(rule,value,callback) =>{
      if (this.dataForm.intro) {
        callback()
      }
    }
    var validateCardOwner  =(rule,value,callback) =>{
      if (this.dataForm.cardOwner) {
        callback()
      }
    }
    var validateopenBank =(rule,value,callback) =>{
      if (this.dataForm.openBank) {
        callback()
      }
    }

    return {
      rightCode: '',
      oriMobile: '',
      oriBankCode: '',
      oriCardNumber: '',
      visible: false,
      isPending: false,
      remainingTime:60,
      validateRunning: false,
      dataForm: {
        checkCode: '',
        mobile: '',
        cardNumber: '',
        cardOwner: '',
        openBank: '',
        intro: '',
        bankCode: '',
      },
      dataRule: {
        mobile: [
          { validator: validateMobile, trigger: 'blur' }
        ],
        checkCode: [
          { validator: validatecheckCode, trigger: 'blur'}
        ],
        cardNumber:[
          { validator:validateBankNumber ,trigger:'blur' }
        ],
        // cardOwner:[
        //   { validator:validateCardOwner ,trigger:'blur' }
        // ],
        // openBank:[
        //   { validator:validateopenBank ,trigger:'blur' }
        // ],
        // intro:[
        //   { validator:validateIntro ,trigger:'blur' }
        // ],

      }
    }

  },
  methods: {
    init (info) {
      console.log(info);
      this.visible = true
      this.dataForm.mobile = info.mobile
      this.dataForm.cardNumber = info.cardNumber
      this.dataForm.cardOwner = info.cardOwner
      this.dataForm.intro = info.intro
      this.dataForm.openBank = info.openBank
      this.oriMobile = info.mobile
      this.oriCardNumber = info.cardNumber
      this.oriBankCode = info.bankCode
      this.dataForm.checkCode = ''
      this.dataForm.bankCode = info.bankCode
    },

    getCheckCode(){
      if (!this.dataForm.mobile) {
        this.$message.error('请先输入手机号')
        return
      }
      this.sendMsg()
      this.isPending = true
      var conter = setInterval(() => {
        this.remainingTime-=1
      }, 1000);
      setTimeout(() =>{
        clearInterval(conter)
        this.isPending = false
        this.remainingTime = 60
      },60000)
    },

    sendMsg(){
      console.log('running');
      this.$http({
        url: this.$http.adornUrl('/p/sms/send'),
        method: 'get',
        params: this.$http.adornParams({
          mobile: this.dataForm.mobile
        })
      }).then((res) =>{
          console.log(res);
      }).catch(() =>{
        this.remainingTime = 60
        this.isPending = false
      })
    },

    // 表单提交
    dataFormSubmit () {
      console.log('submit running');
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/shop/shopDetail/updateInformation`),
            method: 'put' ,
            params: this.$http.adornParams({
              mobile: this.dataForm.mobile,
              cardNumber: this.dataForm.cardNumber,
              cardOwner: this.dataForm.cardOwner,
              intro: this.dataForm.intro,
              openBank: this.dataForm.openBank,
              bankCode: this.dataForm.bankCode
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refresh')
              }
            })
          })
        }
      })
    },

  }
}
</script>

<style scoped>
.el-dialog__header,.el-dialog__footer{
  text-align: center;
}
.container{
  margin: 0 auto;
}
.el-input{
  width: 400px;
}
.el-dialog{
  width: 550px;
}
.el-icon-close:before {
  content: "\E6DB";
  font-size: 23px;
}
</style>
